<template>
	<view class="productItem">
		<view class="boxtop" @click="checkItem">
			<image :src="product.pic" alt="" style="width: 334rpx;height: 334rpx;border-radius: 8rpx;display: block;"/> 
		</view>
		<view class="boxbottom" @click="checkItem">
			<view class="name">{{ product.name }}</view>
			<view class="delat">{{ product.area }}㎡ | {{ product.houseType }}居室北卧</view>
			<view class="list">
				<view class="Item" v-for="(item,index) in product.feature" :key="index">{{ item }}</view>
			</view>
			<view class="priceBox">
				<priceNumber :price="product.price"></priceNumber>
				<view class="danwei">元/天</view>
				<!-- <view class="oldPrcie">￥{{ product.demoPrice }}</view> -->
			</view>
		</view>
	</view>
</template>

<script setup>
import { onMounted, reactive } from 'vue';
import { onLoad } from '@dcloudio/uni-app'
import env from '@/config/common.js'
import priceNumber from '@/components/priceNumber.vue'
let baseUrl = env.API_BASE_URL_DEV
let prop = defineProps({
    product:{
		type: Object,
		default: () => {}
	}
})
const emit = defineEmits(['change'])
const checkItem = ()=>{
	console.log(prop.product.id);
	emit('change',prop.product.id)
}
onMounted(()=>{
})
</script>

<style scoped lang="scss">
.productItem{
	border-radius: 8rpx;
	margin-bottom: 20rpx;
	.boxtop{
		position: relative;
		border-radius: 8rpx;
		.pinpai{
			bottom:0;
			left:0;
			position: absolute;
			color: #FFFFFF;
			font-weight: 400;
			font-size: 22rpx;
			padding: 0 8rpx;
			width: fit-content;
			background-color: #FF4D1B;
			border-radius: 0 8rpx 0 8rpx;
		}
		.renqi{
			bottom:0;
			left:0;
			position: absolute;
			color: #FFFFFF;
			font-weight: 400;
			font-size: 22rpx;
			padding: 0 8rpx;
			width: fit-content;
			background-color: #8169FC;
			border-radius: 0 8rpx 0 8rpx;
		}
		.zhuanti{
			bottom:0;
			left:0;
			position: absolute;
			color: #FFFFFF;
			font-weight: 400;
			font-size: 22rpx;
			padding: 0 8rpx;
			width: fit-content;
			background-color: #458AFF;
			border-radius: 0 8rpx 0 8rpx;
		}
		.xinpin{
			bottom:0;
			left:0;
			position: absolute;
			color: #FFFFFF;
			font-weight: 400;
			font-size: 22rpx;
			padding: 0 8rpx;
			width: fit-content;
			background-color: #FD0021;
			border-radius: 0 8rpx 0 8rpx;
		}
	}
	.boxbottom{
		height: 154rpx;
		padding: 16rpx 8rpx;
		box-sizing: border-box;
		.name{
			color: #000000;
			font-weight: 400;
			font-size: 24rpx;
			margin-bottom: 16rpx;
		}
		.delat{
			font-weight: 400;
			font-size: 24rpx;
			color: #999999;
		}
		.list{
			display: flex;
			align-items: center;
			.Item{
				font-weight: 400;
				font-size: 20rpx;
				color: #46A7FD;
				margin-right: 8rpx;
				padding: 2rpx 10rpx;
				background-color: #DAEDFF;
			}
		}
		.priceBox{
			display: flex; 
			align-items: flex-end;
			.danwei{
				font-weight: 400;
				font-size: 28rpx;
				color: #999999;
			}
		}
		
	}
}
</style>